<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>消息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
    <link rel="stylesheet" href="../assets/js/tls/css/style.css">
    <link rel="stylesheet" href="../assets/js/layui/css/layui.css">

</head>
<body class="bg-gray">
<div class="webim">
    <div class=webim-chat>
        <div class="webim-chatwindow" style="position: fixed;top: 0px;right: 0px;bottom: 0px;left: 0px">
            <div class="webim-chatwindow-title">
                <span style="float:left;">
                    <!--<button id="return" type="button" class="layui-btn layui-btn-primary layui-btn-sm">退出</button>-->
                </span>
                <span id="user_name" style="float:center">

                </span>
            </div>
            <div id="wrapper" class="webim-chatwindow-msg">

            </div>
            <div class="webim-send-wrapper">
                <div class="webim-chatwindow-options">
                    <i style="cursor:pointer;" class="face layui-icon layui-icon-face-smile font xsmaller">&#xe6af;</i>
                    <i style="cursor:pointer;" class="img layui-icon layui-icon-picture-fine font xsmaller" onclick="$('#pic').click()">&#xe60d;</i>
                    <!--<i style="cursor:pointer;" class="file layui-icon layui-icon-file font xsmaller">&#xe621;</i>
                    <i style="cursor:pointer;" class="close layui-icon layui-icon-close font xsmaller"></i>-->
                </div>
                <ul class="hide" id="emj">
                    <li name="[):]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_1.png"></li>
                    <li name="[:D]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_2.png"></li>
                    <li name="[;)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_3.png"></li>
                    <li name="[:-o]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_4.png"></li>
                    <li name="[:p]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_5.png"></li>
                    <li name="[(H)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_6.png"></li>
                    <li name="[:@]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_7.png"></li>
                    <li name="[:s]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_8.png"></li>
                    <li name="[:$]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_9.png"></li>
                    <li name="[:(]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_10.png"></li>
                    <li name="[:'(]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_11.png"></li>
                    <li name="[:|]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_18.png"></li>
                    <li name="[(a)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_13.png"></li>
                    <li name="[8o|]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_14.png"></li>
                    <li name="[8-|]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_15.png"></li>
                    <li name="[+o(]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_16.png"></li>
                    <li name="[<o)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_12.png"></li>
                    <li name="[|-)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_17.png"></li>
                    <li name="[*-)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_19.png"></li>
                    <li name="[:-#]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_20.png"></li>
                    <li name="[:-*]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_22.png"></li>
                    <li name="[^o)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_21.png"></li>
                    <li name="[8-)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_23.png"></li>
                    <li name="[(|)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_24.png"></li>
                    <li name="[(u)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_25.png"></li>
                    <li name="[(S)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_26.png"></li>
                    <li name="[(*)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_27.png"></li>
                    <li name="[(#)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_28.png"></li>
                    <li name="[(R)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_29.png"></li>
                    <li name="[({)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_30.png"></li>
                    <li name="[(})]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_31.png"></li>
                    <li name="[(k)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_32.png"></li>
                    <li name="[(F)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_33.png"></li>
                    <li name="[(W)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_34.png"></li>
                    <li name="[(D)]" class="webim-emoji-item"><img src="../assets/js/tls/images/faces/ee_35.png"></li>
                </ul>
                <textarea id="send_wrapper"></textarea>
                <button class="webim-button bg-color webim-send-btn base-bgcolor disabled">
                    发送
                </button>
            </div>
        </div>
    </div>
    <div id="sendPic" style="display: none;">
        <label>选择图片：</label>
        <input type="file" id="pic">
    </div>
    <div id="sendFile" style="display: none;">
        <label>选择文件：</label>
        <input type="file" id="file">
    </div>
</div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/amazeui.min.js"></script>
    <script src="../assets/js/vue2.2.2.min.js"></script>
    <script src="../assets/common.js"></script>
    <script type='text/javascript' src='../assets/js/layui/layui.js'></script>
    <script type='text/javascript' src='../assets/js/tls/js/lib/jquery/jquery.js'></script>
    <script type="text/javascript" src="../assets/js/tls/js/lib/jquery/jquery-ui.js"></script>
    <script type="text/javascript" src="../assets/js/tls/js/lib/lodash.min.js"></script>
    <script type="text/javascript" src="../assets/js/tls/js/lib/bootstrap/bootstrap.js"></script>
    <script type="text/javascript" src="../assets/js/tls/js/lib/bootstrap/bootstrap-table.js"></script>
    <script type="text/javascript" src="../assets/js/tls/js/lib/bootstrap/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="../assets/js/tls/js/lib/xss.js"></script>
<!--用于获取文件MD5 js api(发送图片时用到)-->
<!--<script type="text/javascript" src="../assets/js/tls/js/lib/md5/spark-md5.js"></script>-->

<!--web im sdk-->
<script type="text/javascript" src="../assets/js/tls/js/sdk/webim.js"></script>
<!--<script type="text/javascript" src="sdk/webim.min.js"></script>-->
<script type="text/javascript" src="../assets/js/tls/js/sdk/json2.js"></script>

<!--web im sdk 登录 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/login/login.js"></script>
<!--web im sdk 登出 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/logout/logout.js"></script>
<!--web im 解析一条消息 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/common/show_one_msg.js"></script>
<!--web im demo 基本逻辑-->
<script type="text/javascript" src="../assets/js/tls/js/base.js"></script>
<!--web im sdk 资料管理 api 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/profile/profile_manager.js"></script>
<!--web im sdk 好友管理 api 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/friend/friend_manager.js"></script>
<!--web im sdk 好友申请管理 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/friend/friend_pendency_manager.js"></script>-->
<!--web im sdk 好友黑名单管理 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/friend/friend_black_list_manager.js"></script>-->
<!--web im sdk 最近联系人 api 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/recentcontact/recent_contact_list_manager.js"></script>
<!--web im sdk 群组管理 api 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/group/group_manager.js"></script>
<!--web im sdk 群成员管理 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/group/group_member_manager.js"></script>-->
<!--web im sdk 加群申请管理 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/group/group_pendency_manager.js"></script>-->
<!--web im 切换聊天好友或群组 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/switch_chat_obj.js"></script>
<!--web im sdk 获取c2c获取群组历史消息 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/msg/get_history_msg.js"></script>
<!--web im sdk 发送普通消息(文本和表情) api 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/msg/send_common_msg.js"></script>
<!--web im sdk 上传和发送图片消息 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/upload_and_send_pic_msg.js"></script>-->
<!--web im sdk 上传和发送文件消息 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/upload_and_send_file_msg.js"></script>-->
<!--web im sdk 切换播放语音消息 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/switch_play_sound_msg.js"></script>-->
<!--web im sdk 发送自定义消息 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/send_custom_msg.js"></script>-->
<!--web im sdk 发送群自定义通知 api 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/send_custom_group_notify_msg.js"></script>-->
<!--<script type="text/javascript" src="../assets/js/tls/js/common/change_title.js"></script>-->
<!--<script type="text/javascript" src="../assets/js/tls/js/common/radio.js"></script>-->
<!--web im 监听新消息(c2c或群) 示例代码-->
<script type="text/javascript" src="../assets/js/tls/js/msg/receive_new_msg.js"></script>
<!--web im 监听群系统通知消息 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/receive_group_system_msg.js"></script>-->
<!--web im 监听好友系统通知消息 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/receive_friend_system_msg.js"></script>-->
<!--web im 监听资料系统通知消息 示例代码-->
<!--<script type="text/javascript" src="../assets/js/tls/js/msg/receive_profile_system_msg.js"></script>-->
<!--<script type="text/javascript" src="../assets/js/tls/js/senddata.js"></script>-->

    <script src="../assets/js/md5.js"></script>
    <link rel="stylesheet" href="../assets/js/layui/css/layui.css">
    <script type='text/javascript' src='../assets/js/layui/layui.js'></script>
    <script type="text/javascript"
        src="../assets/js/jquery-cookie/jquery.cookie.js"></script>
    <script>
        var sessionid = getQueryString("sessionid");
        var toUserId = getQueryString("toUserId");
        var identifier;
        var userSig;
        var myHeadIcon;
        var toHeadIcon;
        var myName;
        $.ajax({
            type:"get",
            url:baseUrl+"v3.0/userhead/"+toUserId,
            async:false,
            success:function(result) {
                toHeadIcon = result;
            }
        });

        layui.use('layer', function(){
            var layer = layui.layer;
            var mask = layer.msg('正在加载', {icon: 16});
            setTimeout(function () {
                layer.close(mask);
            },2000);
        });

        $.ajax({
            type:"get",
            url:baseUrl+"v3.0/userList/simple",
            headers:{"session_id":sessionid},
            async:false,
            success:function(result) {
                identifier = result.id;
                userSig = result.userSig;
                myName = result.name;
                myHeadIcon = result.head_icon;
            }
        });



        //帐号模式，0-表示独立模式，1-表示托管模式
        var accountMode = 0;

        var sdkAppID = 1400098008;
        var accountType = 28305;

        //当前用户身份
        var loginInfo = {
            'sdkAppID': sdkAppID, //用户所属应用id,必填
            'identifier': identifier, //当前用户ID,必须是否字符串类型，必填
            'accountType': accountType, //用户所属应用帐号类型，必填
            'userSig': userSig, //当前用户身份凭证，必须是字符串类型，必填
            'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
            'headurl': '../assets/js/tls/images/me.jpg' //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
        };

        var AdminAcount = 'qwe101';
        var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
        var selToID = toUserId; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
        var selSess = null; //当前聊天会话对象
        var recentSessMap = {}; //保存最近会话列表
        var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义

        //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
        var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息


        var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
        var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到

        var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
        var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

        var emotionFlag = false; //是否打开过表情选择框

        var curPlayAudio = null; //当前正在播放的audio对象

        var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
        var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息




        var onC2cEventNotifys = {
            "92": onMsgReadedNotify, //消息已读通知,
            "96" : onMultipleDeviceKickedOut
        };


        //监听连接状态回调变化事件
        var onConnNotify = function(resp) {
            var info;
            switch (resp.ErrorCode) {
                case webim.CONNECTION_STATUS.ON:
                    webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
                    break;
                case webim.CONNECTION_STATUS.OFF:
                    info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
                    // alert(info);
                    webim.Log.warn(info);
                    break;
                case webim.CONNECTION_STATUS.RECONNECT:
                    info = '连接状态恢复正常: ' + resp.ErrorInfo;
                    // alert(info);
                    webim.Log.warn(info);
                    break;
                default:
                    webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
                    break;
            }
        };

        //IE9(含)以下浏览器用到的jsonp回调函数
        function jsonpCallback(rspData) {
            webim.setJsonpLastRspData(rspData);
        }

        //监听事件
        var listeners = {
            "onConnNotify": onConnNotify //监听连接状态回调变化事件,必填
            ,
            "jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数x，
            ,
            "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
            ,
            "onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
            ,
            "onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
            ,
            "onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
        };

        var isAccessFormalEnv = true; //是否访问正式环境



        var isLogOn = false; //是否开启sdk在控制台打印日志

        //初始化时，其他对象，选填
        var options = {
            'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
            'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
        }
        // var tag_list = [
        //     "Tag_Profile_IM_Nick"//昵称
        // ];
        // webim.getProfilePortrait(
        //     {
        //         'To_Account': [toUserId],
        //         'TagList': tag_list
        //     },
        //     function (resp) {
        //         $("#user_name").html(resp.UserProfileItem[0].ProfileItem[0].Value);
        //     },
        //     function (err) {
        //         alert(err.ErrorInfo);
        //     }
        // );
        var wrapper = document.getElementById("wrapper");
        var bindScrollHistoryEvent = {
            init: function() {
                wrapper.onscroll = function() {
                    if (wrapper.scrollTop == 0) {
                        wrapper.scrollTop = 10;
                        if (selType == webim.SESSION_TYPE.C2C) {
                            getPrePageC2CHistoryMsgs();
                        } else {
                            getPrePageGroupHistoryMsgs();
                        }

                    }
                }
            },
            reset: function() {
                wrapper.onscroll = null;
            }
        };
        independentModeLogin();
        var lastMsgTime = 0;
        var msgKey = "";
        var options = {
            'Peer_Account': selToID, //好友帐号
            'MaxCnt': reqMsgCount, //拉取消息条数
            'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
            'MsgKey': msgKey
        };
        webim.MsgStore.delSessByTypeId(selType, selToID);

        var historyMsg = new Array();

        setTimeout(function(){
            webim.getC2CHistoryMsgs(
                options,
                function (resp) {
                    options.LastMsgTime = resp.LastMsgTime;
                    options.MsgKey = resp.MsgKey;
                    $.each(resp.MsgList, function (i, msg) {
                        addMsg(msg);
                    })
                    // addMsg();
                }
            );
        }, 1000);

        $(".face").click(function(){
            if($(this).parent().next().attr("class")==""){
                $(this).parent().next().attr("class","hide");
            }else{
                $(this).parent().next().attr("class","");
            }
        });

        $(".webim-emoji-item").click(function(){
            $("#send_wrapper").val($("#send_wrapper").val()+$(this).attr("name"));
        });

        $(".webim-send-btn").click(function(){
            if(document.getElementById("send_wrapper").value.length>70){
                layer.msg('消息内容不能超过70个字符');
                return false;
            }
            onSendMsg();
            $.ajax({
                type:"post",
                url:baseUrl+"v4.0/common/send_to_mini?userid="+toUserId,
                headers:{"session_id":sessionid},
                async:false
            });
        })

        // var msgIsFinished = setInterval(function () {
        //     var listenOptions = {
        //         'Peer_Account': selToID, //好友帐号
        //         'MaxCnt': reqMsgCount, //拉取消息条数
        //         'LastMsgTime': 0, //最近的消息时间，即从这个时间点向前拉取历史消息
        //         'MsgKey': ""
        //     };
        //     webim.MsgStore.delSessByTypeId(selType, selToID);
        //     if($.cookie('isSend')==null) {
        //         $.cookie('isSend', 0, {expires: 1});
        //     }
        //     webim.getC2CHistoryMsgs(
        //         listenOptions,
        //         function (resp) {
        //             listenOptions.LastMsgTime = resp.LastMsgTime;
        //             listenOptions.MsgKey = resp.MsgKey;
        //             for(var i=resp.MsgList.length-1;i>0;i--){
        //                 if(resp.MsgList[i].fromAccount==identifier){
        //                     if(resp.MsgList[i].sess._impl.unread>0){
        //                         //判断是否发送过信息
        //                         if($.cookie('isSend')==0){
        //                             //发送消息
        //                             $.cookie('isSend', 1, { expires: 1 });
        //                             window.clearInterval(msgIsFinished);
        //                             break;
        //                         }
        //                     }
        //                 }
        //             }
        //
        //         }
        //     );
        // },1000);

        $("#wrapper").scroll(function() {
            if ($("#wrapper").scrollTop()<=0){
                webim.MsgStore.delSessByTypeId(selType, selToID);
                webim.getC2CHistoryMsgs(
                    options,
                    function (resp) {
                        resp.MsgList.reverse();
                        $.each(resp.MsgList, function (i, msg) {
                            console.log(resp);
                            if(resp.Complete==1) {
                                options.LastMsgTime = resp.LastMsgTime;
                                options.MsgKey = resp.MsgKey;
                                addMsg(msg, true);
                            }
                        });
                    }
                );
            }
        });
        $("#emj").click(function(){
            $(this).attr("class","hide")
        })

    </script>
</body>
</html>